{extend name='public/layer_base' /}
{block name='content'}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <form class="layui-form" method="post">

                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="name" name="name"  lay-verify="required"
                                autocomplete="off" class="layui-input" value="{$data.name|default=''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"  for="description" >简介</label>
                        <div class="layui-input-inline">
                            <input type="text" id="description" name="description"  
                                autocomplete="off" class="layui-input" value="{$data.description|default=''}">
                        </div>
                      </div>


                    <div class="layui-form-item">
                        <label for="avatar" class="layui-form-label">图片</label>
                        <div class="layui-input-inline">
                            <div class="layui-upload-drag" id="upload">
                                <i class="layui-icon"></i>
                                <p>点击上传，或将文件拖拽到此处</p>
                            </div>
                            <div class="layui_img">
                                <div class="layui-progress thumb_progress" id="progress" lay-showPercent="yes" lay-filter="progressBar">
                                    <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                                </div>
                                <img src="{$data.img|default=''}" id="srcimgthumb" alt="" class="srcimgavatar" srcset="">
                                <input type="hidden" name="img" id="inputimgthumb" value="{$data.img|default=''}">
                            </div>
                        </div>
                        <style>
                            .thumb_progress{
                                display: none;
                            }
                            .srcimgavatar {
                                width: 300px;
                                display: block;
                                margin: 1% 0px;
                            }
                        </style>
                        <script>
                            layui.use('upload', function () {
                                var upload = layui.upload;
                                upload.render({
                                    elem: '#upload'
                                    , url: "{:url('upfile/upload')}"
                                    , acceptMime: 'image/*'
                                    , accept: 'images'
                                    , size: 1024
                                    , progress: function (n, elem, res, index) {
                                        $('.thumb_progress').show();
                                        var percent = n + '%' 
                                        element.progress('progressBar', percent); 
                                    }
                                    , done: function (res, index, upload) { 
                                        $("#inputimgthumb").val(res.data.url);
                                        $('.thumb_progress').hide();
                                        $("#srcimgthumb").attr('src', res.data.url).show();

                                    }
                                });
                            })
                        </script>
                        <div class="layui-form-item">
                            <label for="nickname" class="layui-form-label">
                                是否启用</label>
                            <div class="layui-input-inline">
                                <input type="checkbox" lay-skin="switch" lay-filter="status" value="1" {if isset($data)
                                    && $data.status==1} checked {/if}>
                                <input type="hidden" name="status" value="{$data.status|default='0'}">
                            </div>
                            <script>
                                layui.use('form', function () {
                                    var form = layui.form;
                                    form.on('switch(status)', function (data) {
                                        $('input[name=status]').val(data.elem.checked ? '1' : '0');

                                    })
                                })
                            </script>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_repass" class="layui-form-label"></label>
                            <button class="layui-btn" lay-filter="submit" id="submit" lay-submit="submit"
                                type="button">保存</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
</div>

{/block}